<template>
	<view class="modal-mask-box" v-if="modalInfo.showModal">
		<view class="toast-dialog">
			<view class="toast-title">{{ modalInfo.title }}</view>
			<view class="toast-content">
				<input class="toast-ipt" type="number" v-model="modalInfo.content" :placeholder="modalInfo.placeholder" />
			</view>
			<view class="toast-footer">
				<view class="btn-cancel" @click="modalCancel">取消</view>
				<view class="btn-confirm" @click="modalConfirm(modalInfo.content)">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props: {
			modalInfo: {
				type: Object,
				default: {}
			}
		},
		methods: {
			modalCancel(){
				this.$emit('modalCancel')
			},
			modalConfirm(phone){
				this.$emit('modalConfirm',phone)
			},
		}
	}
</script>

<style lang="less">
.modal-mask-box {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	z-index: 998;
	.toast-dialog {
		width: 540rpx;
		overflow: hidden;
		position: fixed;
		top: 50%;
		left: 0;
		z-index: 9999;
		background: #f9f9f9;
		margin: -180rpx 105rpx;
		border-radius: 16rpx;
	}
	.toast-title {
		padding-top: 47rpx;
		font-size: 32rpx;
		color: #222;
		text-align: center;
	}
	.toast-content {
		font-size: 28rpx;
		text-align: center;
		margin-top: 41rpx;
		margin-bottom: 35rpx;
		color: #222;
		.toast-ipt {
			background: #eee;
			width: 90%;
			height: 66rpx;
			margin: 0 5%;
			line-height: 66rpx;
			text-align: left;
			padding: 0 6rpx;
		}
	}
	.toast-footer {
		display: flex;
		flex-direction: row;
		height: 94rpx;
		border-top: 1px solid #dedede;
		line-height: 94rpx;
	}
	.btn-cancel {
		width: 50%;
		color: #666;
		text-align: center;
		border-right: 1px solid #dedede;
	}
	.btn-confirm {
		width: 50%;
		color: #6a7ca1;
		text-align: center;
	}
}
</style>
